import React, { useEffect, useState } from "react";
import { deleteCart, getCartList, setCartCount } from "../../api";
import { Checkbox } from "antd-mobile";
import "./index.css";
interface cart {
	count: number;
	id: string;
	image: string;
	name: string;
	price: string;
	checked: boolean;
}
// 只要视图改变 函数机会重新执行
export default function Cart() {
	const [cartList, setCartList] = useState<cart[]>([]);
	const [timer, setTimer] = useState<any>(null); // 状态可以缓存上一次的结果  直接声明变量 每次组件更新会被重置
	const [allCheck, setAllCheck] = useState(false);
	const [allPrice, setAllPrice] = useState(0); // 计算总价
	useEffect(() => {
		getCart();
	}, []);
	const getCart = () => {
		getCartList().then((res: any) => {
			setCartList(
				res.map((item: any) => {
					return { ...item, checked: false };
				})
			);
		});
	};
	const setCount = (id: string, count: string | number) => {
		setCartCount({ id, count }).then(
			res => {
				// getCart();
			},
			() => {
				getCart(); // 如果接口报错则重置数据
			}
		);
	};
	// let timer: any = null; //  不是一个状态
	// 第一层优化
	// 1. 防抖函数  一段时间内执行N次只执行最后一次
	// 2. 函数节流  每隔一段时间才能执行一次函数
	function noShake(callBack: any, delay: any = 500, ...arg: any) {
		// 函数防抖
		// if (timer) clearTimeout(timer);
		// setTimer(
		// 	setTimeout(() => {
		// 		callBack(...arg);
		// 	}, delay)
		// );
		// 函数节流
		if (!timer) {
			// 相当于加了一个锁 这个每次关闭 要等delay秒才能再次打开
			setTimer(true);
			setTimeout(() => {
				callBack(...arg);
				setTimer(false);
			}, delay);
		}
	}
	// 第二层优化
	// 监听allChecked
	// useEffect(() => {
	// 	setCartList((prev: any) => {
	// 		// prev 上一次的结果
	// 		return prev.map((item: cart) => {
	// 			return { ...item, checked: allCheck };
	// 		});
	// 	});
	// }, [allCheck]);
	useEffect(() => {
		// 计算总价
		setAllPrice(prev => {
			// reduce 累加
			// [].reduce((上一次结果, 本次的值)=>{}, 初始值)
			return cartList.reduce((a: number, b: any) => {
				return a + (b.checked ? b.price * b.count : 0);
			}, 0);
		});
	}, [cartList]);
	return (
		<div>
			全选
			<Checkbox
				checked={allCheck}
				onChange={checked => {
					// 全选
					setCartList((prev: any) => {
						// prev 上一次的结果
						return prev.map((item: cart) => {
							return { ...item, checked: checked };
						});
					});
					setAllCheck(checked);
				}}
			/>
			{cartList.some(item => item.checked) ? (
				<button
					onClick={() => {
						deleteCart({
							idList: cartList
								.filter((item: any) => {
									if (item.checked) {
										// 如果选择则返回他的id
										return item.id;
									}
								})
								.map(item => item.id),
						}).then(res => {
							getCart();
						});
					}}
				>
					删除
				</button>
			) : (
				""
			)}
			总价:{allPrice}
			{cartList.map((item: cart) => {
				return (
					<div className="cartList" key={item.id}>
						<Checkbox
							checked={item.checked}
							onChange={checked => {
								// 反选
								item.checked = checked; // 视图不会更新
								setCartList(
									JSON.parse(JSON.stringify(cartList))
								); // 深拷贝才能触发视图更新 因为cartList是引用类型
								setAllCheck(() => {
									return cartList.every(item => item.checked);
								});
							}}
						/>
						<div className="left">
							<img src={item.image} alt="" />
						</div>
						<div className="right">
							<div className="title">{item.name}</div>
							<div className="title">{item.price}</div>
							<button
								onClick={() => {
									noShake(
										setCount,
										500,
										item.id,
										item.count * 1 - 1
									);
									item.count = item.count * 1 - 1;
									setCartList(
										JSON.parse(JSON.stringify(cartList))
									);
								}}
							>
								-
							</button>
							<span>{item.count}</span>
							<button
								onClick={() => {
									noShake(
										setCount,
										500,
										item.id,
										item.count * 1 + 1
									);
									item.count = item.count * 1 + 1;
									setCartList(
										JSON.parse(JSON.stringify(cartList))
									);
								}}
							>
								+
							</button>
						</div>
					</div>
				);
			})}
		</div>
	);
}
